<template>
	<view>
		
		<u-navbar :title="title" @leftClick="leftClick" :autoBack="false" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000">
			<view class="u-nav-slot color-w font-14" slot="right" @click="rightClick" v-if="editeBool === 'add'">申请记录</view>
		</u-navbar>

		<view class="bg-white margin-lr padding-lr padding-bottom m-t-10">

			<view class="w-100">
				<view class="font-15 text-bold padding-tb-sm">
					<text class="text-red margin-right-sm">*</text>
					<text>店铺名称</text>
				</view>
				<view>
					<u-input v-model="form.storeName" :readonly="editeBool =='look'" type="text" placeholder="请输入店铺名称" :clearable="false" :maxlength="20" />
				</view>
			</view>

			<view class="bg-white w-100 border-box boxContent m-t-10">
				<view class="font-14 font-b">
					<text class="text-red margin-right-sm">*</text>
					<text>店铺头像</text>
				</view>
				<view class="font-12 color-gray m-t-20">尺寸800*800以上，大小5MB以内，支持png/jpeg/jpg</view>
				<view class="flex">
					<u-upload class="m-t-20 " :deletable="editeBool != 'look'" :fileList="fileList1" @afterRead="afterRead($event,1)" @delete="deletePic(1)" name="1" multiple :maxCount="1" />
				</view>
			</view>

			<view class="bg-white w-100 border-box boxContent m-t-10">
				<view class="font-14 font-b">
					<text class="text-red margin-right-sm">*</text>
					<text>店铺封面图</text>
				</view>
				<view class="font-12 color-gray m-t-20">尺寸800*800以上，大小5MB以内，支持png/jpeg/jpg</view>
				<view class="flex">
					<u-upload class="m-t-20 " :deletable="editeBool !='look'" :fileList="fileList2" @afterRead="afterRead($event,2)" @delete="deletePic(2)" name="2" multiple :maxCount="1" />
				</view>
			</view>

			<view class="bg-white w-100 border-box boxContent m-t-10">
				<view class="font-14 font-b">
					<text class="text-red margin-right-sm">*</text>
					<text>营业执照</text>
				</view>
				<view class="font-12 color-gray m-t-20">尺寸800*800以上，大小5MB以内，支持png/jpeg/jpg</view>
				<view class="flex">
					<u-upload class="m-t-20 " :deletable="editeBool !='look'" :fileList="fileList3" @afterRead="afterRead($event,3)" @delete="deletePic(3)" name="3" multiple :maxCount="1" />
				</view>
			</view>

			<!-- <view class="w-100">
				<view class="font-15 text-bold padding-tb-sm">
					<text class="text-red margin-right-sm">*</text>
					<text>法人姓名</text>
				</view>
				<view>
					<u-input v-model="form.corporateName" :readonly="editeBool =='look'" type="text" placeholder="请输入法人姓名" :maxlength="10" :clearable="false" />
				</view>
			</view> -->
			
			<view class="w-100">
				<view class="font-15 text-bold padding-tb-sm">
					<text class="text-red margin-right-sm">*</text>
					<text>法人身份证号码</text>
				</view>
				<view>
					<u-input v-model="form.corporateCard" :readonly="editeBool =='look'" type="number" placeholder="请输入法人身份证号码" :maxlength="18" :clearable="false" />
				</view>
			</view>
			
			<!-- <view class="bg-white w-100 border-box boxContent m-t-10">
				<view class="font-15 font-b">
					<text class="text-red margin-right-sm">*</text>
					<text>法人身份证正面照</text>
				</view>
				<view class="font-12 color-gray m-t-20">尺寸800*800以上，大小5MB以内，支持png/jpeg/jpg</view>
				<view class="flex">
					<u-upload class="m-t-20 " :deletable="editeBool !='look'" :fileList="fileList4" @afterRead="afterRead($event,4)" @delete="deletePic(4)" name="4" multiple :maxCount="1" />
				</view>
			</view>

			<view class="bg-white w-100 border-box boxContent m-t-10">
				<view class="font-15 font-b">
					<text class="text-red margin-right-sm">*</text>
					<text>法人身份证反面照</text>
				</view>
				<view class="font-12 color-gray m-t-20">尺寸800*800以上，大小5MB以内，支持png/jpeg/jpg</view>
				<view class="flex">
					<u-upload class="m-t-20 " :deletable="editeBool !='look'" :fileList="fileList5" @afterRead="afterRead($event,5)" @delete="deletePic(5)" name="5" multiple :maxCount="1" />
				</view>
			</view> -->

			<view class="w-100">
				<view class="font-15 text-bold padding-tb-sm">
					<text class="text-red margin-right-sm">*</text>
					<text>负责人姓名</text>
				</view>
				<view>
					<u-input v-model="form.principalName" :readonly="editeBool =='look'" type="text" placeholder="请输入负责人姓名" :maxlength="10" :clearable="false" />
				</view>
			</view>
			
			<view class="w-100">
				<view class="font-15 text-bold padding-tb-sm">
					<text class="text-red margin-right-sm">*</text>
					<text>负责人电话</text>
				</view>
				<view>
					<u-input v-model="form.principalMobile" :readonly="editeBool =='look'" type="number" placeholder="请输入负责人电话" :maxlength="11" :clearable="false" />
				</view>
			</view>

			<checkbox-group @change="agreementChange" class="flex align-center margin-top-sm" v-if="editeBool !='look' ">
				<checkbox value="1" :checked="agreement" color="#FD5D5F" style="transform: scale(0.7)" />
				<view class="font-11 p-t-2">
					<text class="text-gray">我已阅读并同意</text>
					<text class="text-theme" @click="toAgreement">《商家入驻协议》</text>
				</view>
			</checkbox-group>

			<view class="logout-btn" @click="submit" v-if="editeBool =='add'">提交资料</view>
			<view class="logout-btn" @click="submit" v-if="editeBool =='edit'">重新提交</view>
		</view>
	</view>
</template>

<script>
	import { storeJoin,storeJoinResubmit } from '@/common/api/join.js';
	import { uploadFile } from '@/common/utils/uploadImg.js';
	export default {
		data() {
			return {
				title:'商家入驻',
				form: {
					id: null,//编辑时需要
					storeName: null,//店铺名称
					logo: null,//店铺图片
					mainImgUrl: null,//店铺封面图
					businessLicense: null,//营业执照
					// corporateName: null,//法人姓名
					corporateCard: null,//法人身份证
					// corporateCardFront: null,//法人身份证正面
					// corporateCardBack: null,//法人身份证反面
					principalName: null,//负责人姓名
					principalMobile: null,//负责人电话
				},
				fileList1:[],//店铺图片
				fileList2:[],//店铺封面图
				fileList3:[],//营业执照
				// fileList4:[],//法人身份证正面
				// fileList5:[],//法人身份证反面
				statusList: [
					{label: 1,value: '审核中'},
					{label: 2,value: '审核通过'},
					{label: 3,value: '审核驳回'}
				],
				agreement: true,//勾选协议
				storeJoinInfo:{},
				editeBool: 'add',
			}
		},
		onLoad(options) {
			// 编辑
			if(options.data && options.data == 1){
				this.title = '商家入驻详情'
				this.editeBool = 'look'
				this.displayData()
			}else if(options.data && options.data == 2){// 编辑
				this.editeBool = 'edit'
				this.title = '商家入驻编辑'
				this.displayData()
			}
		},
		methods: {
			//勾选协议
			agreementChange(){
				this.agreement = !this.agreement
			},
			// 回显数据
			displayData(){
				this.storeJoinInfo = uni.getStorageSync('storeJoinInfo');
				this.form.storeName = this.storeJoinInfo.storeName
				// this.form.corporateName = this.storeJoinInfo.corporateName
				this.form.corporateCard = this.storeJoinInfo.corporateCard
				this.form.principalName = this.storeJoinInfo.principalName
				this.form.principalMobile = this.storeJoinInfo.principalMobile

				let arr1 = [{url: this.storeJoinInfo.logo}],
					arr2 = [{url: this.storeJoinInfo.mainImgUrl}],
					arr3 = [{url: this.storeJoinInfo.businessLicense}];
					// arr4 = [{url: this.storeJoinInfo.corporateCardFront}]
					// arr5 = [{url: this.storeJoinInfo.corporateCardBack}]

				this.form.logo = this.storeJoinInfo.logo || ''
				this.form.mainImgUrl = this.storeJoinInfo.mainImgUrl || ''
				this.form.businessLicense = this.storeJoinInfo.businessLicense || ''
				// this.form.corporateCardFront = this.storeJoinInfo.corporateCardFront || ''
				// this.form.corporateCardBack = this.storeJoinInfo.corporateCardBack || ''

				this.fileList1 = arr1
				this.fileList2 = arr2
				this.fileList3 = arr3
				// this.fileList4 = arr4
				// this.fileList5 = arr5
			},
			// 返回
			leftClick(){
				let pages = getCurrentPages()
 				var beforePagePath = pages[pages.length - 2].route; // 前一个页面
				// 如果不是从积分商城主页进入,则才返回个人中心
				if(beforePagePath !== 'pages/my/join/record'){
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					},200)
				}else{
					setTimeout(() => {
						uni.navigateBack()
					},200)
				}
			},
			// 新增图片1
			async afterRead(event,index) {
				const result = await this.uploadFilePromise(event.file[0].url)
				if(result.data){
					if(index == 1){
						this.fileList1 = [{url: result.data}]
						this.form.logo = result.data;
					}else if(index == 2){
						this.fileList2 = [{url: result.data}]
						this.form.mainImgUrl = result.data;
					}else if(index == 3){
						this.fileList3 = [{url: result.data}]
						this.form.businessLicense = result.data;
					}
					// else if(index == 4){
					// 	this.fileList4 = [{url: result.data}]
					// 	this.form.corporateCardFront = result.data;
					// }else if(index == 5){
					// 	this.fileList5 = [{url: result.data}]
					// 	this.form.corporateCardBack = result.data;
					// }
				}
			},
			// 上传图片
			uploadFilePromise(file) {
				return new Promise((resolve, reject) => {
					let res = uploadFile(file, 9)
					resolve(res)
				})
			},
			// 删除图片
			deletePic(index) {
				if(index == 1){
					this.fileList1 = []
					this.form.logo = [];
				}else if(index == 2){
					this.fileList2 = []
					this.form.mainImgUrl = [];
				}else if(index == 3){
					this.fileList3 = []
					this.form.businessLicense = [];
				}
				// else if(index == 4){
				// 	this.fileList4 = []
				// 	this.form.corporateCardFront = [];
				// }else if(index == 5){
				// 	this.fileList5 = []
				// 	this.form.corporateCardBack = [];
				// }
			},
			// 跳转协议
			toAgreement() {
				uni.navigateTo({
					url: '/pages/my/join/agreement'
				})
			},
			// 申请记录
			rightClick(){
				uni.navigateTo({
					url: '/pages/my/join/record'
				})
			},
			// 审核提交
			submit() {
				if(!this.form.storeName) {
					return this.$msg('请输入店铺名称')
				}
				if(!this.form.logo) {
					return this.$msg('请上传店铺图片')
				}
				if(!this.form.mainImgUrl) {
					return this.$msg('请上传店铺封面图')
				}
				if(!this.form.businessLicense) {
					return this.$msg('请上传营业执照')
				}
				// if(!this.form.corporateName) {
				// 	return this.$msg('请输入法人姓名')
				// }
				if(!this.form.corporateCard) {
					return this.$msg('请输入法人身份证号码')
				}
				const regex = /\d{17}(\d|X|x)/
				if (!regex.test(this.form.corporateCard)) {
					return this.$msg('请输入正确的身份证号')
				}
				// if(!this.form.corporateCardFront) {
				// 	return this.$msg('请上传法人身份证正面照片')
				// }
				// if(!this.form.corporateCardBack) {
				// 	return this.$msg('请上传法人身份证反面照片')
				// }
				if(!this.form.principalName) {
					return this.$msg('请输入负责人姓名')
				}
				if(!this.form.principalMobile) {
					return this.$msg('请输入负责人电话')
				}
				if(!this.agreement) {
					return this.$msg('请勾选商家入驻协议')
				}
				uni.showLoading({
					mask: true,
					title: '资料提交中...'
				})
				let parmas = {
					storeName: this.form.storeName,//店铺名称
					logo: this.form.logo,//店铺图片
					mainImgUrl: this.form.mainImgUrl,//店铺封面图
					businessLicense: this.form.businessLicense,//营业执照
					// corporateName: this.form.corporateName,//法人姓名
					corporateCard: this.form.corporateCard,//法人身份证
					// corporateCardFront: this.form.corporateCardFront,//法人身份证正面
					// corporateCardBack: this.form.corporateCardBack,//法人身份证反面
					principalName: this.form.principalName,//负责人姓名
					principalMobile: this.form.principalMobile,//负责人电话
				}
				if(this.editeBool === 'add'){
					let parmas1 = {...parmas}
					storeJoin(parmas1).then(res => {
						uni.hideLoading()
						if(res.code == 200) {
							this.$msg('申请成功！')
							this.form = {}
							this.fileList1 = []
							this.fileList2 = []
							this.fileList3 = []
							uni.navigateTo({
								url: '/pages/my/join/record'
							})
						} else {
							this.$msg(res.msg)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}else if(this.editeBool === 'edit'){
					let parmas2 = {
						...parmas,
						id: this.storeJoinInfo.id
					}
					storeJoinResubmit(parmas2).then(res => {
						uni.hideLoading()
						if(res.code == 200) {
							this.$msg('重新提交成功！')
							setTimeout(() => {
								uni.navigateBack()
							},1000)
						} else {
							this.$msg(res.msg)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F3F5;
	}
</style>
<style lang="scss" scoped>
	.borderBox{
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
	}
	.input-box {
		border-radius: 8rpx;
		border: 2rpx solid #dcdfe6;
		color: #c0c4cc;
		font-size: 28rpx;
		padding: 16rpx 20rpx;
	}
	::v-deep .cc_area_mask {
		height: 200vh;
	}
	.main {
		width: 600rpx;
		background: #FFFFFF;
		box-shadow: 0 7rpx 21rpx 0 rgba(0,0,0,0.46);
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
	}
	.upload-box {
		width: 220rpx;
		height: 220rpx;
		border-radius: 14rpx;
		border: 2rpx solid #dcdfe6;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 108rpx;
		font-weight: 100;
		color: #BEBEBE;
		margin: 20rpx 0;
	}
	.btn-gray {
		background: gray !important;
	}
	.logout-btn {
		height: 88rpx;
		background: #e60000;
		border-radius: 16rpx;
		margin: 70rpx 50rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>